<template>
  <div class="echarts">
    <a-button type="primary" @click="backMap()">返回概览</a-button>
    <div style="display:flex">
      <div style="width:1040px"></div>
    <div :style="{height:'800px',width:'1047px'}" ref="myEchart"></div>
    </div>
    
  </div>
</template>
<script>
import { getAction } from "@/http/index"
import echarts from "echarts";
import 'echarts/lib/chart/map';// 引入地图数据
import 'echarts/map/js/china';
//import { provinces, cityMap } from "@/utils/design" //区域数据

export default {
  name: "echarts",
  props: ["userJson"],
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.mapChart();
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.clear()
    }
  },
  methods: {
    // 返回全国视图
    backMap() {
      this.mapChart()
    },
    mapChart() {
      let that = this
      that.myChart = echarts.init(that.$refs.myEchart); //这里是为了获得容器所在位置
      that.myChart.off("click"); //移除点击事件
      window.onresize = that.myChart.resize;

      getAction(`/map/city/${140100}.json`, {}).then(data => {
        echarts.registerMap('太原市', data.data);
        initEcharts('太原市')
      })
      function initEcharts(map) {
        let option = {
          geo: {
            map: map,
            roam: false,//是否开启鼠标缩放和平移漫游
            // 地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                borderColor: "rgba(6, 73, 194, 1)",
                borderWidth: 1,
                //areaColor:"rgba(39, 59, 166, 0)",
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(12, 96, 250, 1)", // 100% 处的颜色
                    },
                    // {
                    //   offset: 0.8,
                    //   color: "rgba(12, 100, 250, 0)", // 100% 处的颜色
                    // },
                    {
                      offset: 1,
                      color: "rgba(39, 59, 166, 1)", // 0% 处的颜色

                    },
                  ],
                  globalCoord: true, // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 0.6)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              emphasis: {
                areaColor: "rgb(44 117 251)",
                borderColor:'rgba(6, 73, 194, 1)',
                borderWidth:1,
                shadowBlur:100,
                shadowColor: "rgba(128, 217, 248, 1)",
                shadowOffsetY:0,
                shadowOffsetX:0,
                label:{
                  color:'#ffffff'
                }
              },
            },
          },
          series: [
            {
              name: "信息",
              type: "map",
              mapType: map,
              geoIndex: 0,//用这个 geoIndex 指定一个 geo 组件
            }
          ]
        };
        that.myChart.setOption(option)
      }
      that.myChart.on("click", function (param) {
        console.log("地图点击", param)


      });

    }
  }
}
</script>
<style scoped>
.echarts{
  width: 3200px;
    height: 900px;
    margin: 0 auto;
    background: url("../assets/screenBg.png") no-repeat;
    background-size: 100% 100%;
    padding: 50px 50px 30px 50px;

}
</style>